<template>
  <t-pop :active="active" :withPop="withPop" @oncancel="oncancel" :minHeight="minHeight">
    <div class="ui very relaxed">
    <div class="ui header" v-if="title">{{title}}</div>
      <div class="sixteen wide column">
        <form class="ui form" @submit.prevent="">
          <template v-for="field in data">
              <template v-if="Array.isArray(field)">
                <div class="fields inline">
                  <template v-for="cfield in field">
                    <component :is="code2Name( cfield )" v-if="!cfield.ishide" :type="code2Name( cfield, true)" :data="cfield" :editType="editType" :param="{}" :field="field" @onchange="onchange" @onclick="onclick" :value="cfield.value" ></component>
                  </template>
                </div>
              </template>
              <template v-else-if="field.show_type_code || field.show_type">
                <component :is="code2Name( field )" :data="field" :type="code2Name( field, true )" v-if="!field.ishide" :field="field" :editType="editType" :param="{}" @onchange="onchange" @onclick="onclick" :value="field.value" :bindModel="field.bindModel"></component>
              </template>
              <template v-else>
                <div class="field inline" v-if="!field.ishide" :class="{disabled: field.readonly}">
                  <label>{{field.label}}</label>
                  <span>{{field.value || "无数据"}}</span>
                </div>
              </template>
          </template>
          <div v-if="!nosubmit">
            <button type="button" class="ui secondary button" @click="onsubmit">提 交</button>
            <button type="button" class="ui button" @click="oncancel">取 消</button>
          </div>
        </form>
      </div>
    </div>
  </t-pop>
</template>

<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import logic from '_logic';

  import select_coustom from './fields/enum_coustom';

  import mytext from './fields/text';
  import myhidden from './fields/hidden';
  import myenum from './fields/enum';
  import enum_many from './fields/enum_many';
  import mybind from './fields/bind';
  import mytextArea from './fields/textArea';
  import mydate from './fields/date';
  import mypics from './fields/pics';
  import mynum from './fields/num';
  import field_zip from './fields/field_zip';
  import city from './fields/city';
  import rich from './fields/rich';
  import show_text from './fields/show_text';
  import show_line from './fields/show_line';
  import show_rich from './fields/show_rich';
  import date_range from './fields/date_range';
  import buttons from './fields/buttons';
  import tmodel from './tmodel';

  import tPop from './tPop2'
  export default {
    data(){
      return {
        // components_name_arr: ['', 'myenum','enum_many','rich','show_text', 'myenum', 'mypics','mypics','mybind','mybind'],
        /*下标=> 1:单选,2:复选,3:文本编辑器,4:文本框,5:下拉单选,6:单张图片上传,7:多张图片上传,8:单选搜索框,9:多选搜索框*/

        /*12:city//城市
          14:show_line//单行展示
          15:show_text//文本展示
          16:show_rich//富文本展示
          17:date_range//日期范围
          18:enum_many//枚举(多选)
          19:enum_chb//枚举(checkbox)
          20:myhidden//隐藏字段
          13:custom//自定义
          11:field_zip//字段组
          1:mytext//字符串
          9:rich//富文本
          6:mybind//绑定
          2:mytextArea//文本
          5:mydate//日期
          7:mypics//图片
          10:mypics//图片
          4:mynum//数字
          3:myenum//枚举(单选)
*/
        components_name_arr: ['', 'myenum','enum_many','rich','show_text', 'myenum', 'mypics','mypics','mybind','mybind'],
        components_name_code:{
          "1" : "radio",
          "2" : "checkbox",
          "3" : "editer",
          "4" : "input",
          "5" : "select",
          "6" : "upload",
          "7" : "upload",
          "8" : "bind",
          "9" : "bind",
        },
        components_name_object:{
          "select" : "myenum",
          "input"   : "mytext",
          "text"   : "show_text",
          "textarea": "mytextArea",
          "buttons": "buttons",

          "multipleSelect": "enum_many",
          "checkbox": "enum_many",
          "radio": "myenum",
          "upload": "mypics",
          "editer": "rich",
          "bind" : "mybind",
          "city" : "city",

          'select_coustom':'select_coustom'
        },
        val:{},
        editType:""
      }
    },
    props:{
      active:{
        type:Boolean,
        default(){
          return false
        }
      },
      withPop:{
        type:Boolean,
        default(){
          return false
        }
      },
      title:{
        type:String,
        default(){
          return null
        }
      },
      data:{
        type: Array,
        default(){
          return []
        }
      },
      nosubmit:{
        type: Boolean,
        default(){
          return false
        }
      },
      minHeight:{}
    },
    watch:{
      data:{
        immediate: true,
        handler(val) {
        }
      }
    },
    components:{
      tPop,
      mytext,
      myhidden,
      myenum,
      enum_many,
      mybind,
      mytextArea,
      mydate,
      mypics,
      mynum,
      select_coustom,
      field_zip,
      city,
      rich,
      show_text,
      show_line,
      show_rich,
      date_range,
      buttons,
      tmodel,
    },
    methods:{
      code2Name({show_type_code, show_type}, isRaw){
        if(show_type_code){
          if(isRaw){
            return this.components_name_code[show_type_code];
          }
          return  this.components_name_object[ this.components_name_code[show_type_code] ]
          // return this.components_name_arr[show_type_code]
        }
        if(show_type){
          let res = this.components_name_object[show_type];
          if(res){
            return this.components_name_object[show_type]
          }

          if(isRaw){
            return show_type;
          }
          return "tmodel"
        }
        return null;
      },
      onclick(btn){
        this.$emit("onclick", btn)
      },
      onchange(field){
        let {name, value} = field;
        this.val[name] = value;
        this.$emit("onchange", field, this.val);
      },
      onsubmit(){
        this.$emit("onsubmit", this.val);
      },
      oncancel(){
        this.$emit("oncancel");
      }
    },
    created(){
      this.editType = "etype_" + Math.ceil( Math.random()* 100000 );
    }
  }
</script>
<style lang="less">
  .must{
    &:before{
      content: "* ";
      font-size: 14px;
      color: rgba(219, 40, 40, .80);
    }
  }
</style>
